<!--单图上传组件/按钮-->
<template>
  <div style="display: flex;align-items: center;flex-wrap: wrap;">
    <div v-if="visiable1" style="margin-left: -38px;">
      <draggable class="syllable_el" tag="ul" :list="$store.state.coverUploadList" v-bind="{group:'title', animation:150}"
                 :no-transition-on-drag="true" :move="move" @change="change" @start="start" @end="end">
        <div v-for="(item, index) in $store.state.coverUploadList" :key="index" style="width: 85px;float: left;">
          <div class="demo-upload-list">
            <img :src="imageUtils(imgUrl,item.url)" alt="">
            <div class="demo-upload-list-cover">
              <el-icon class="el-icon-zoom-in" @click.native="handlePictureCardPreview(item.url)"/>
              <el-icon class="el-icon-delete-solid" @click.native="handleRemove(index)"/>
            </div>
          </div>
        </div>
      </draggable>
    </div>
    <div>
      <el-upload class="avatar-uploader" action="#" accept=".png,.jpg,.jpeg,.gif,.webp" multiple :show-file-list="true" :before-upload="beforeAvatarUpload">
        <i class="el-icon-plus avatar-uploader-icon" style="width: 65px;height: 65px;"/>
      </el-upload>
    </div>
    <div>
      <el-dialog width="30%" :visible.sync="dialogVisible" append-to-body>
        <img width="100%;height: 450px" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import '@/styles/mixin.scss'
import appUtils, { isBlank, isFlag } from '@/utils/util'
import { imageUtils } from '@/utils/imageUtil'

export default {
  components: {
    draggable
  },
  props: ['imgUrl', 'maxNumber', 'size'],
  data() {
    return {
      dialogImageUrl: '',
      cover: '',
      coverUploadList: [],
      myImage: appUtils.myImage,
      dialogVisible: false,
      disabled: false,
      visiable: false,
      visiable1: true,
      imageUrl: '',
      coverUrl: '',
      imgName: ''
    }
  },
  watch: {
    'this.$store.state.coverUploadList': 'updateDom'
  },
  methods: {
    imageUtils,
    beforeAvatarUpload(file) {
      let maxLength = isBlank(this.maxNumber) ? 99 : this.maxNumber
      let size = isBlank(this.size) ? 10 : this.size
      this.handleMaxSize(file, size).then(res => {
        if (isFlag(res, true)) {
          const reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = () => {
            if (this.$store.state.coverUploadList.length < maxLength) {
              file.url = reader.result
              this.$store.state.coverUploadList.push(file)
              this.updateDom()
            }
          }
        }
      })
    },
    handleMaxSize(file, size) {
      if (isBlank(size) || isFlag(size, 0)) {
        size = 5
      }
      const fileSize = file.size / 1024 / 1024 < size
      return new Promise((resolve, reject) => {
        if (!fileSize) {
          this.$notify({
            title: 'upload image is error',
            message: '文件过大,请不要超过' + size + 'M.'
          })
          return resolve(false)
        } else {
          return resolve(true)
        }
      })
    },
    handleRemove(index) {
      this.$store.state.coverUploadList.splice(index, 1)
      this.updateDom()
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = imageUtils(this.imgUrl, file)
      this.dialogVisible = true
    },
    updateDom() {
      this.visiable1 = false
      this.$nextTick(() => {
        this.visiable1 = true
      })
    },
    change(evt) {
      if (!isBlank(evt.moved)) {
        let newDate = this.$store.state.coverUploadList[evt.moved.newIndex]
        let oldDate = this.$store.state.coverUploadList[evt.moved.oldIndex]
        if (!isBlank(newDate.sort) && !isBlank(oldDate.sort)) {
          newDate.sort = evt.moved.newIndex
          oldDate.sort = evt.moved.oldIndex
        }
        this.$set(this.$store.state.coverUploadList, evt.moved.newIndex, newDate)
        this.$set(this.$store.state.coverUploadList, evt.moved.oldIndex, oldDate)
        this.updateDom()
      }
    },
    start(evt) {
    },
    end(evt) {
      evt.item // 可以知道拖动的本身
      evt.to // 可以知道拖动的目标列表
      evt.from // 可以知道之前的列表
      evt.oldIndex // 可以知道拖动前的位置
      evt.newIndex // 可以知道拖动后的位置
    },
    move(evt, originalEvent) {
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-container {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
}
</style>
